<template>
  <section>
    <!-- 登录 -->
    <div class="container">
      <div class="details-tabs">

            <el-form ref="formRef" :model="form" :rules="rules" style="width: 150% ;margin-top: 18%;margin-left: 6%">
              <el-form-item>
                <el-input type="text" name="" placeholder="输入用户名" v-model="form.uname" style=""></el-input>
              </el-form-item>
<!--              <el-form-item prop="email" style="width: 100%;">
                <el-input type="email" name="" placeholder="输入邮箱" v-model="form.email"
                          style="margin-top: 3%"></el-input>
              </el-form-item>-->
              <el-form-item>
                <el-input type="password" name="" placeholder="输入密码" v-model="form.password"
                          style="margin-top: 3%"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" name="" placeholder="确认密码" v-model="form.password02"
                          style="margin-top: 3%"></el-input>
              </el-form-item>
              <el-button plain type="primary" name=""
                         style="font-size: larger;height: 40px;width: 150px;margin-left: 17%;margin-top: 7% ;  background: transparent;color: #495470"
                         @click="handleSign(form.uname,form.password,form.password02)">确认
              </el-button>
            </el-form>
      </div>
    </div>
  </section>
</template>>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      activeName: 'first',
      options: [{
        value: '1',
        label: '用户'
      }, {
        value: '2',
        label: '租户'
      }, {
        value: '3',
        label: '答者'
      }],
      value: '',
      form: {
        phone: '',
        email: '',
        code: '',
        uname: '',
        password: '',
        password02: '',
        anth: '',
        length: '4'
      },
      rules: {
        // 邮箱
        email: [
          {
            required: true,
            trigger: 'blur'
          },
          {
            type: 'string',
            trigger: 'blur',
            transform (value) {
              if (!/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)) {
                return true
              } else {
              }
            }
          },
          {
            type: 'string',
            message: '长度不能超过30位',
            trigger: 'blur',
            max: 30
          }
        ],
      },
      // 这是登录表单的数据绑定对象
      loginForm: {
        phone: '',
        password: '',
        phonenumber: '',
        unumber: ''

      },
      // 表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          {
            required: true,
            message: '请输入登录名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 11,
            message: '长度在3到11个字符',
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在6到15个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    //发送验证码
    sendCode (email, length) {
      this.$http.get('/sendcode', {
        params: {
          email: email,
          length: length
        }
      }).then((data) => {
        if (data.status === 200) {
          this.$message.success('发送成功')
        } else {
          this.$message.error('发送失败，请重新发送')
        }
      })

      /* this.$http.get('/sendcode', {
        params: {
          email: this.email,
          length: this.length,
        }
      }).then((data) => {
        alert(data.status)
        if(data.status === 200){
          this.$message.success("发送成功");
        }
        else{
          this.$message.error("发送失败，请重新发送");
        }
      }); */
    },
    handleSign (uname, answer,answer02) {
      if(answer!==answer02){
        this.$message.error({
          message:'两次密码不一致',
          duration:1000,
        })
        return
      }
      this.$message.success({
        message:'重置成功',
        duration:1000,
      })
      this.$router.push('/welcome')
    },
    onSubmit () {
      console.log('submit!')
    },
    signIn () {
      this.$router.push('/sign')
    },
    changePassword () {
      this.$router.push('/changePassword')
    },
    topggleForm () {
      var container = document.querySelector('.container')
      container.classList.toggle('active')
    },
    LoginByPhone () {
      this.$router.push('/LoginByPhone')
    },
    // 点击重置按钮，重置登录表单
    login (username, password) {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          this.$message.error('请输入正确格式的用户名')
          return
        }
        //发送post请求
        this.$http.post('/loginbypassword', {
          loginacct: username,
          password: password
        }).then(({ data }) => {
          if (data.code === 200) {
            this.$message.success('欢迎用户' + username)
            this.Global.globalUser.globalID = data.data.id
            this.Global.globalUser.globalAuth = data.data.auth
            this.Global.globalUser.globalPhone = data.data.phone
            this.Global.globalUser.globalName = data.data.username
            this.$router.push('/home')
          } else {
            this.$message.error('登录失败')
          }
          this.dataListLoading = false
        })
      })
    }
  }
}
</script>
<style scoped>
.bottomSpan {
  margin-top: 3%;
  margin-left: 3%;
  color: #89a8ef;
  font-size: 1px;
}
/deep/input::-webkit-input-placeholder {
  color: #696969;

}
.container .details-tabs {
  min-height: 1000px;
  /*margin-top: 20px;*/
  padding-top: 20px;
  background-color: #fff;
}

.el-button--primary {
  font-size: 15px;
  text-align: center;
}

>>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}

>>> .el-tabs__nav-wrap::after {
  position: static !important;

}

>>> .el-input__inner {
  width: 66%;
  border: 0;
  background: transparent;

}

.box-con {
  width: 90px;
  height: 90px;
  position: absolute;
  background: linear-gradient(#FFFFFF, #9ed4ff);
  top: -45px;
  right: -45px;
  transform: rotate(45deg);
}
</style>
<style src="./new.css" scoped></style>
